<template>
  <div class="box">
    <div class="main">
      <!-- 左边内容版块 -->
      <div class="m-left">
        <div class="content">
          <p><img src="../assets/imgs/logo.png" class="img"></p>
          <p>欢迎！</p>
          <p>智学商城-后台管理系统</p>
        </div>
      </div>
      <!-- 表单 -->
      <div class="m-right">
        <p class="title">登录</p>
        <div class="form-box">
          <el-form ref="ruleForm" :rules="rules" :model="ruleForm" label-width="40px" class="demo-dynamic">
            <el-form-item prop="username">
              <el-input v-model="ruleForm.username" type="text" autocomplete="off" placeholder="请输入账号" class="input">
                <template #prefix>
                  <el-icon>
                    <User />
                  </el-icon>
                </template>
              </el-input>
            </el-form-item>

            <el-form-item prop="password">
              <el-input v-model="ruleForm.password" type="password" class="input" placeholder="请输入密码">
                <template #prefix>
                  <el-icon>
                    <Lock />
                  </el-icon>
                </template>
              </el-input>
            </el-form-item>

            <el-form-item>
              <div class="button">
                <el-button type="primary" size="large" @click="submitForm('ruleForm')">登录</el-button>
                <p>制作：陳威</p>
              </div>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { User, Lock } from '@element-plus/icons-vue';
import Cookies from 'js-cookie'
import { post } from "@/utils/http";
import { debounce } from "@/utils/debounce";
import _form from "lodash";  //防抖节流
export default {
  data() {
    //表单验证
    const checkName = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入账号'))
      } else {
        callback()
      }
    }
    const validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        callback()
      }
    }
    return {
      //表单数据
      ruleForm: {
        username: "",
        password: "",
        _gp: "admin",
        _mt: "login"
      },
      rules: {
        password: [
          {
            validator: validatePass,
            trigger: 'blur'
          }
        ],
        username: [
          {
            validator: checkName,
            trigger: 'blur'
          }
        ]
      }
    }
  },
  components: {
    User,
    Lock
  },
  methods: {
    // 防抖操作
    submitForm:_.debounce(function (formEl) {
      this.$refs[formEl].validate(valid => {
        if (valid) {
          post(this.ruleForm).then(res => {
            if (200 == res.errno) {
              Cookies.set('pwd', this.ruleForm.password) //用于修改密码验证
              let Data = new Date()
              console.log(Data);
              Data.setTime(Data.getTime() + 60000 * 30)
              Cookies.set("token", res.data, { expires: Data })  //存储token 设置过期时间
              Object.assign(this.$store.state.userInfo, this.ruleForm)  //储存到vuex
              this.$router.replace({
                path: this.$route.query.path || "/index/home"  //token过期返回登录，登录之后跳转之前页面
              })
              ElMessage.success('登录成功')
            } else {
              console.log(res);
              ElMessage.error(res.errmsg)
            }
          }).catch(err => {
            console.log(err);
          })
        } else {
          ElMessage.error('信息不能为空')
          return false
        }
      })
    }, 500)
  }
}
</script>

<style lang="less" scoped>
.box {
  background: url("../assets/imgs/login-back.png") 0px 0px no-repeat;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.main {
  width: 650px;
  height: 300px;
  display: flex;
  border-radius: 20px;
}
.m-left {
  width: 40%;
  height: 100%;
  background-color: #005de9;
  display: flex;
  justify-content: center;
  flex-direction: column;
}
.content {
  text-align: center;
}
.m-left p {
  color: white;
}
.m-right {
  width: 60%;
  height: 100%;
  background-color: white;
}
.img {
  width: 80px;
  border-radius: 50%;
  box-shadow: 5px 3px 20px 2px white;
}

.title {
  text-align: center;
  margin-top: 80px;
}

//表单
.button {
  width: 100%;
  text-align: center;
  padding-right: 30px;
}
.input {
  width: 300px !important;
}
</style>